"use client"

import { TrendingUp } from "lucide-react"
import { Bar, BarChart, CartesianGrid, Cell, LabelList } from "recharts"

import {
   Card,
   CardContent,
   CardDescription,
   CardFooter,
   CardHeader,
   CardTitle,
} from "~/registry/miami/ui/card"
import {
   type ChartConfig,
   ChartContainer,
   ChartTooltip,
   ChartTooltipContent,
} from "~/registry/miami/ui/chart"

export const description = "A bar chart with negative values"

const chartData = [
   { month: "January", visitors: 186 },
   { month: "February", visitors: 205 },
   { month: "March", visitors: -207 },
   { month: "April", visitors: 173 },
   { month: "May", visitors: -209 },
   { month: "June", visitors: 214 },
]

const chartConfig = {
   visitors: {
      label: "Visitors",
   },
} satisfies ChartConfig

export default function Component() {
   return (
      <Card>
         <CardHeader>
            <CardTitle>Bar Chart - Negative</CardTitle>
            <CardDescription>January - June 2024</CardDescription>
         </CardHeader>
         <CardContent>
            <ChartContainer config={chartConfig}>
               <BarChart accessibilityLayer data={chartData}>
                  <CartesianGrid vertical={false} />
                  <ChartTooltip
                     cursor={false}
                     content={<ChartTooltipContent hideLabel hideIndicator />}
                  />
                  <Bar dataKey="visitors">
                     <LabelList
                        position="top"
                        dataKey="month"
                        fillOpacity={1}
                     />
                     {chartData.map((item) => (
                        <Cell
                           key={item.month}
                           fill={
                              item.visitors > 0
                                 ? "hsl(var(--chart-1))"
                                 : "hsl(var(--chart-2))"
                           }
                        />
                     ))}
                  </Bar>
               </BarChart>
            </ChartContainer>
         </CardContent>
         <CardFooter className="flex-col items-start gap-2 text-sm">
            <div className="flex gap-2 font-medium leading-none">
               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
            </div>
            <div className="leading-none text-muted-foreground">
               Showing total visitors for the last 6 months
            </div>
         </CardFooter>
      </Card>
   )
}
